<template>
  <div class="login-container">
    <h1>东软环保公众监督平台</h1>
    <h4>-----公众监督员端-----</h4>
    <el-card class="login-card">
      <h2 style="text-align: center">用户登录</h2>
      <LoginForm />
      <div class="register-link">
        <router-link to="/register">注册</router-link>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import LoginForm from '@/components/neps/LoginForm.vue'
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('@/assets/images/loginImg.png');
  background-size: cover;
}

.login-card {
  width: 300px;
  padding: 20px;
  background-color: rgba(129, 158, 151, 0.75);
  backdrop-filter: blur(1px) saturate(0);
  border-radius: 10px;
}
h1,
h4 {
  color: #3f7722;
}

.register-link {
  font-size: 13px;
  padding: 10px;
}
</style>
